<template>
  <div
    class="ScreenAdapter"
    :style="style"
  >
    <slot />
  </div>
</template>
<script>
export default {
  name: 'xxx',
  //参数注入
  props: {
    width: {
      type: String,
      default: '1920' 
    },
    height: {
      type: String,
      default: '1080' 
    }
  },
  data() {
    return {
      style: {
        width: this.width + 'px',
        height: this.height + 'px',
        // transform: 'scale(1) translate(-50%, -50%)'
      }
    }
  },
  mounted() {
    this.setScale()
    window.onresize = this.Debounce(this.setScale, 1000)
  },
  methods: {
    Debounce: (fn, t) => {
      const delay = t || 500
      let timer
      return function() {
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        const context = this
        timer = setTimeout(() => {
          timer = null
          fn.apply(context, args)
        }, delay)
      }
    },
    // 获取放大缩小比例
    getScale() {
      let w = window.innerWidth / this.width
      let h = window.innerHeight / this.height
      // return w < h ? w : h
      console.log(w)
      if(w>1.5){
        w = w-0.2
      }
      return [w, h]
    },
    // 设置比例
    setScale() {
      // this.style.transform = 'scale(' + this.getScale() + ') translate(-50%, -50%)'
      if(this.getScale()[0]<1.2){
        console.log('不变')
        return
      }else{
        console.log('放大了：', this.getScale()[0] , this.getScale()[1] )
        // this.style.transform = 'scale(' + this.getScale()[0] + ',' + this.getScale()[1] +') translate(-50%, -50%)'
        this.style.transform = 'scale(' + this.getScale()[0] + ',' + this.getScale()[1] +')'

      }
    }
  }
}
</script>
<style scoped>
.ScreenAdapter {
  transform-origin: 0 0;
  position: absolute;
  /* left: 50%; */
  /* top: 50%; */
  left: 0;
  top: 0;
  transition: 0.3s;
  /* background: red; */
}
</style>